<template>
  <div class="resource">
    <!-- 信息 -->
    <h3 class="heading">小信息</h3>
    <div class="share-data">
      <h6>信息</h6>
      <ul>

        <li>
          <p class="share-yesterday">
            ❤️获赞
            <span class="num">
              ++123
              </span>
          </p>
          <p class="share-num">123</p>
          <span class="share-info">获赞总数</span>
        </li>


        <li>
          <p class="share-yesterday">🌸关注
            <span class="num">
              ++123
              </span>
          </p>
          <p class="share-num">123</p>
          <span class="share-info">粉丝总数</span>
        </li>
        <li>
          <p class="share-yesterday">💧杯数
            <span class="num">
              ++123
              </span>
          </p>
          <p class="share-num">123</p>
          <span class="share-info">喝水杯数</span>
        </li>
        <!--(500ml/杯)-->


      </ul>
    </div>
  </div>

</template>

<script>
export default {
  name: "Resource"
}
</script>

<style lang="less">
.resource {
  margin-top: 25px;
  position: relative;
  padding: 0 15px;
  border: 1px solid transparent;

  .heading {
    opacity: 1;
    padding: 0 10px 0 10px;
    font-weight: 600;
    font-size: 18px;
  }
}

.share-data {
  border-radius: 8px;
  background: @white-color;
  margin: 10px 0 10px 0;
  padding: 10px;

  h6 {
    margin-bottom: 10px;
    text-align: center;
    font-size: 14px;
  }

  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;

      .share-yesterday {
        font-size: 10px;
        color: @minor-font-color;
        margin-bottom: 5px;

        .num {
          color: @assist-color;
        }
      }

      .share-num {
        font-size: 21px;
        font-weight: 700;
        color: @main-font-color;
        margin: 10px 0;
      }

      .share-info {
        font-size: 12px;
        color: @subdominant-font-color;
      }
    }
  }
}
</style>